import React from 'react';

const ChartsBase = ( props: any ) => {
	let { config, children } = props;
	let backBaseStyle = {
		width: '100%',
		height: '100%',
		overflow: 'hidden',
		// padding: '5px',
		// backgroundColor: config.chartBackgroundColor || '#fff',
		// 边框部分
		borderStyle: config.chartBorderStyle || 'solid',
		borderRadius: config.chartBorderRadius || 0,
		borderWidth: config.chartBorderWidth || 1,
		borderColor: config.chartBorderColor || '#e2e2e2',
		boxShadow: `${config.chartBorderShadowColor} ${config.chartBorderShadowWidth}px ${config.chartBorderShadowWidth}px ${config.chartBorderShadowDeviation}px`,
		opacity: config.chartBackgroundOpacity ? ( 100 - config.chartBackgroundOpacity ) / 100 : 1
	};

	return (
		<div style={backBaseStyle}>
			{config && children}
		</div>
	);
};

export default React.memo( ChartsBase );
